<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>部门人员管理</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/js.cookie.js"></script>
    <script>
        $(document).ready(function(){

            var role;
            var loginStatusText = Cookies.get('loginStatus')
            if (loginStatusText) {
                var loginStatus
                try {
                    loginStatus = JSON.parse(loginStatusText);
                    role = loginStatus.role
                } catch (error) {
                    console.error("An error occurred:", error);
                }
            }

            // 控制按钮显示
            function controlButtons() {
                var role;
                var loginStatusText = Cookies.get('loginStatus');
                if (loginStatusText) {
                    try {
                        var loginStatus = JSON.parse(loginStatusText);
                        role = loginStatus.role;
                    } catch (error) {
                        console.error("An error occurred:", error);
                    }
                }

                if (role === 'general_manager' || role === 'admin') {
                    $('#addBtn').show();
                } else {
                    $('#addBtn').hide();
                }
            }
            controlButtons();

            // 查询列表
            function searchList() {
                var departmentId = $('#departmentId').val();
                var userName = $('#userName').val();
                $.ajax({
                    url: "/api/oadepartmentlink/list",
                    type: 'POST',
                    data: JSON.stringify({ oaDepartmentId: departmentId, userName: userName }),
                    contentType: 'application/json',
                    success: function(data) {
                        var html = '';
                        $.each(data.data, function(i, item) {
                            if (role === 'general_manager' || role === 'admin' ) {
                                html += '<tr>' +
                                    '<td>' + item.id + '</td>' +
                                    '<td>' + item.departmentName + '</td>' +
                                    '<td>' + item.userName + '</td>' +
                                    '<td> ' +
                                    '<button class="btn btn-success btn-edit" data-id="' + item.id + '">修改</button> ' +
                                    '<button class="btn btn-danger btn-delete" data-id="' + item.id + '">删除</button></td>' +
                                    '</tr>';
                            }else{
                                html += '<tr>' +
                                    '<td>' + item.id + '</td>' +
                                    '<td>' + item.departmentName + '</td>' +
                                    '<td>' + item.userName + '</td>' +
                                    '<td> ' +
                                    ' </td>' +
                                    '</tr>';
                            }

                        });
                        $('#list').html(html);
                    }
                });
            }
            searchList();

            // 绑定查询按钮的点击事件
            $('#listquery').click(searchList);

            // 新增部门人员
            $('#btn-add').click(function() {
                var departmentUserLink = {
                    oaDepartmentId: $('#addDepartmentId').val(),
                    userInfoId: $('#addUserId').val()
                };
                $.ajax({
                    url: "/api/oadepartmentlink/add",
                    type: 'POST',
                    data: JSON.stringify(departmentUserLink),
                    contentType: 'application/json',
                    success: function(res) {
                        if(res.stateCode === '200'){
                            searchList();
                            $('#addModal').modal('hide');
                        } else {
                            window.alert(res.msg);
                        }
                    }
                });
            });

            // 绑定编辑事件
            $(document).on('click', '.btn-edit', function() {
                var id = $(this).data('id');
                $.ajax({
                    url: '/api/oadepartmentlink/detail',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify({ id: id }),
                    success: function(response) {
                        var departmentUserLink = response.data;
                        $('#editId').val(departmentUserLink.id);
                        $('#editDepartmentId').val(departmentUserLink.oaDepartmentId);
                        $('#editUserId').val(departmentUserLink.userInfoId);
                        $('#editModal').modal('show');
                    },
                    error: function() {
                        alert('获取部门人员详情失败');
                    }
                });
            });

            // 绑定编辑模态框的更新事件
            $('#editBtn').click(function() {
                var departmentUserLink = {
                    id: $('#editId').val(),
                    oaDepartmentId: $('#editDepartmentId').val(),
                    userInfoId: $('#editUserId').val()
                };
                $.ajax({
                    url: '/api/oadepartmentlink/update',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(departmentUserLink),
                    success: function() {
                        searchList();
                        $('#editModal').modal('hide');
                    },
                    error: function() {
                        alert('更新部门人员失败');
                    }
                });
            });

            // 删除部门人员
            $(document).on('click', '.btn-delete', function() {
                var id = $(this).data('id');
                if (confirm("确定要删除这条记录吗？")) {
                    $.ajax({
                        url: "/api/oadepartmentlink/delete",
                        type: 'POST',
                        data: JSON.stringify({ id: id }),
                        contentType: 'application/json',
                        success: function() {
                            searchList();
                        }
                    });
                }
            });


            // 加载部门数据并填充到下拉框
            function loadDepartments() {
                var department = {
                };
                $.ajax({
                    url: '/api/oadepartment/list', // 替换为你的部门列表接口URL
                    type: 'POST',
                    data: JSON.stringify(department),
                    contentType: 'application/json',
                    success: function(departments) {
                        var departmentSelect = $('#addDepartmentId');
                        departments.data.forEach(function (department) {
                            departmentSelect.append($('<option></option>').val(department.id).html(department.name));
                        });

                        var editDepartmentId = $('#editDepartmentId');
                        editDepartmentId.empty(); // 清空下拉框
                        departments.data.forEach(function (department) {
                            editDepartmentId.append($('<option></option>').val(department.id).html(department.name));
                        });

                    },
                    error: function() {
                        alert('获取部门数据失败');
                    }
                });
            }

            // 加载员工数据并填充到下拉框
            function loadUsers() {
                var department = {
                    role: "staff"
                };
                $.ajax({
                    url: '/api/userInfo/list', // 替换为你的员工列表接口URL
                    type: 'POST',
                    data: JSON.stringify(department),
                    contentType: 'application/json',
                    success: function (users) {
                        var userSelect = $('#addUserId');
                        users.data.forEach(function (user) {
                            userSelect.append($('<option></option>').val(user.id).html(user.name));
                        });

                        var editUserId = $('#editUserId');
                        editUserId.empty(); // 清空下拉框
                        users.data.forEach(function(user) {
                            editUserId.append($('<option></option>').val(user.id).html(user.name));
                        });

                    },
                    error: function () {
                        alert('获取员工数据失败');
                    }
                });
            }

            // 加载部门数据
            loadDepartments();
            // 加载员工数据
            loadUsers();

        });
    </script>
    <script>
        $(function () {
            $('#header').load('admin_header.html');
        })
    </script>
</head>
<body>
<div id="header"></div>
<div></div>
<div class="container">
    <h2>部门人员管理</h2>
    <input type="text" id="departmentId" placeholder="部门ID">
    <input type="text" id="userName" placeholder="员工姓名">
    <button class="btn btn-primary" id="listquery">查询</button>
    <button class="btn btn-success btn-add" id="addBtn" data-toggle="modal" data-target="#addModal">新增</button>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>ID</th>
            <th>部门名称</th>
            <th>员工姓名</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="list">
        </tbody>
    </table>
</div>

<!-- 新增部门人员模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                <h4 class="modal-title">新增部门人员</h4>
            </div>
            <div class="modal-body">

                <div class="modal-body">
                    <div class="form-group">
                        <label for="addDepartmentId">部门ID:</label>
                        <select class="form-control" id="addDepartmentId">
                            <!-- 部门数据将通过AJAX动态填充 -->
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="addUserId">员工ID:</label>
                        <select class="form-control" id="addUserId">
                            <!-- 员工数据将通过AJAX动态填充 -->
                        </select>
                    </div>
                    <button class="btn btn-primary" id="btn-add">确定</button>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- 修改部门人员模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                <h4 class="modal-title">修改部门人员</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" class="form-control" id="editId">
                <div class="form-group">
                    <label for="editDepartmentId">部门ID:</label>
                    <select class="form-control" id="editDepartmentId">
                        <!-- 部门数据将通过AJAX动态填充 -->
                    </select>
                </div>
                <div class="form-group">
                    <label for="editUserId">员工ID:</label>
                    <select class="form-control" id="editUserId">
                        <!-- 员工数据将通过AJAX动态填充 -->
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="editBtn">更新</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
